<!DOCTYPE html><html><head><title>14-vertical-align img特征 cursor opacity</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="14-vertical-align-img特征-cursor-opacity">14-vertical-align img特征 cursor opacity</h1>

<h3 id="一-vertical-align-垂直对齐方式">一、 vertical-align 垂直对齐方式</h3>

<p>vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐。</p>

<blockquote>
  <p>baseline       默认。元素的基线与父元素的基线对齐。 <br>
  top         元素的顶端与一行中最高元素的顶边对齐 <br>
  middle      元素的中垂点与 父元素的基线加1/2父元素中小写字母x的高度 对齐 <br>
  bottom      把元素的底端与一行中最高元素的底边对齐。 <br>
  text-top        元素的顶端与父元素字体的顶端对齐 <br>
  text-bottom 把元素的底端与父元素字体的底端对齐。</p>
</blockquote>

<p>a、加vertical-align的同排元素都要vertical-align； <br>
b、vertical-align可以解决img下方间隙问题； <br>
<code>注：inline、inline-block、img图片标签才能生效</code></p>



<h3 id="三-cursor指针样式">三、 cursor指针样式</h3>

<p>cursor 指针样式：规定要鼠标进入元素内容区域要显示的光标的类型  cursor：pointer | text |move ……</p>

<blockquote>
  <p>default        默认光标（通常是一个箭头） <br>
  auto        默认。浏览器设置的光标。 <br>
  pointer     光标呈现为指示链接的指针（一只手） <br>
  move        此光标指示某对象可被移动。 <br>
          text        光标指示文本。 <br>
  wait        光标指示正忙（通常是一只表或沙漏）。 <br>
  help        光标指示帮助（通常是一个问号或一个气球）</p>
</blockquote>

<p>参考资料：   <a href="http://www.w3school.com.cn/cssref/pr_class_cursor.asp" target="_blank">http://www.w3school.com.cn/cssref/pr_class_cursor.asp</a></p>

<p>自定义指针样式： <br>
    cursor:url(hand.cur),pointer;</p>



<h3 id="四opacity">四、opacity</h3>

<p>opacity：设置元素的不透明级别 <br>
标准： <br>
    不透明度：opacity:0~1;  <br>
    从 0（完全透明） <br>
    到 1（完全不透明） <br>
IE 滤镜：  <br>
    filter:alpha(opacity=0~100); <br>
    从 0（完全透明） <br>
    到 100（完全不透明）</p></div></body></html>